<script>
export default {
    name: 'Tab',
    props:{
        label:{
            type: String,
            required: true
        },
        rel:{
            type: [String,Number],
            default:1
        }
    },
    computed:{
        active(){
            return this.$parent.defaultValue == this.rel;
        }
    },
    methods:{
        clickHandle(){
            this.$parent.dochange(this.rel);
        }
    },
    mounted(){
        this.$parent.datas.push(this);
    },
    render(){
        let className = {
            tab : true,
            active: this.active
        };
        return (
            <li class={ className } onClick={ this.clickHandle }>{ this.label }<span><i class="iconfont icon-new"></i></span></li>
        )
    }
}
</script>

<style lang="less" scoped>
li{
    list-style:none;
    cursor:pointer;
    height: 0.9rem;
    line-height: 0.9rem;
    color: #6d6d6d;
    border-bottom: 1px solid #6d6d6d;
    text-align:center;
    position:relative;
    span{
        display: none;
        position: absolute;
        right: 0 ;
        top: 0;
        color: #f00;
        height:0.9rem;
        i{
            font-size:0.9rem;
            margin-top: -0.1rem;
        }
    }
}
li:first-child span{
    display:block;
}
li.active:before{
    content: "";
    position: absolute;
    top:0.1rem;
    left:0;
    width:0.15rem;
    height:0.7rem;
    background: #ffd600;
}
</style>